<template>
	<div class="bookedit">
		<div>
			<h3>商品添加</h3>
			<hr />
			<p>商品名称：<input type="text" v-model="obj.name"  /></p>
			<p>商品序号：<input type="text" v-model="obj.sn" /></p>
			<p>商品价格：<input type="text" v-model="obj.price" /></p>
			<p>商品厂商：<input type="text" v-model="obj.author" /></p>
			<p>商品出处：<input type="text" v-model="obj.publisher" /></p>
			<p>出厂时间：<input type="date" v-model="obj.tpublish" /></p>
			<p>商品类型：
				<el-cascader v-model="obj.bookType_id" :options="newMenu"></el-cascader>
			</p>
			<article>
				<div class="bookimg"><img :src="`${$Imgurl}/api/public/showImg/${picture}`" /></div>
				<p><input type="file" ref='imgUrl'/></p>
			</article>
			<hr />
		</div>
		<div>
			<el-button><router-link :to="{name:'books'}">返回列表</router-link></el-button>
			<el-button @click="Submit()">提交</el-button>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'Bookedit',
		data(){
			return{
				list:[],//原数组
				newMenu:[],//多级菜单
				picture:'',//图片
				id:'',
				page:1,
				obj:{
					name:'',//名称
					sn:'',//编号
					author:'',//作者
					publisher:'',//出处
					tpublish:'',//日期
					price:'',//价格
					bookType_id:"",//商品类型
				}
			}
		},
		created() {
			this.select();
			this.axios.get('/api/adm/hot/findAll').then((res)=>{
				//console.log(res);
			}).catch((error)=>{
				console.log(error);
			}),
			this.axios.get('/api/adm/type/findAll2').then((res)=>{
				this.list=res.data.data
				console.log(this.list);
				this.getMenu(0,this.newMenu);
			}).catch((error)=>{
				console.log(error);
			})
		},
		methods:{
			Submit(){
				// 选中最后一位书本类型
				let bookID = this.obj.bookType_id.length;
				if(bookID==undefined){
					bookID = this.obj.bookType_id;
				}else{
					bookID = this.obj.bookType_id[this.obj.bookType_id.length-1];
				}
				//获取地址栏的参数作为id值
				this.id = this.$route.query.bookid
				//将时间转为时间戳
				let times = new Date(this.obj.tpublish).getTime()
				//获取图片
				let imgfile = this.$refs.imgUrl.files[0]
				let fromdata = new FormData();
				if(this.obj.name!=''&&this.obj.sn!=''&&this.obj.author!=''&&this.obj.publisher!=''&&this.obj.tpublish!=''&&this.obj.price!=''&&this.obj.bookType_id!=''){
					fromdata.append('id',this.id)
					fromdata.append('name',this.obj.name)//商品名称
					fromdata.append('sn',this.obj.sn)//商品序号
					fromdata.append('price',this.obj.price)//商品价格
					fromdata.append('author',this.obj.author)//商品厂商
					fromdata.append('publisher',this.obj.publisher)//商品出处
					fromdata.append('tpublish',times)//时间
					fromdata.append('bookType.id',bookID)//商品类型
					if(imgfile!=null){
						fromdata.append('pic',imgfile)//图片
					}else{
						fromdata.append('picture',this.picture)//图片
					}
					this.axios.post('/api/adm/book/addBook',fromdata,).then((res)=>{
						if(res.data.code===200){
							this.picture=res.data.data.book.picture
							this.select()//刷新数据
							alert('添加成功')
						}
					}).catch((error)=>{
						console.log(error);
					})
				}
			},
			//根据地址栏的id获取数据
			select(){
				this.id = this.$route.query.bookid
				if(this.id!=0){
					this.axios.get('/api/adm/book/findById/'+this.id).then((res)=>{
						let data = res.data.data;
						this.obj.name = data.name;
						this.obj.sn = data.sn;
						this.obj.price = data.price;
						this.obj.author = data.author;
						this.obj.publisher = data.publisher;
						this.obj.bookType_id = data.bookType.id;
						this.picture=data.picture
						this.Times(data.tpublish)
					}).catch((error)=>{
						console.log(error);
					})
				}
			},
			// 过滤时间
			Times(t){
				let times = new Date(t)
				let year = times.getFullYear();
				let month =this.Tumtime(times.getMonth()+1);
				let day = this.Tumtime(times.getDate())
				this.obj.tpublish = year+'-'+month+'-'+day
			},
			Tumtime(t){
				return t>9?t:'0'+t
			},
			// 多级菜单格式化
			getMenu(id,arr){
				if(id===0){
					//第一级菜单
					this.list.forEach(item=>{
						if(item.pid===0){
							let temp = {value:item.id,label:item.type}
							arr.push(temp)
						}
					})
					//再第一级菜单完成之后，从第一级的第一个菜单进入
					this.getMenu(this.newMenu[0].id,this.newMenu)
				}else{
					//其他他等级的菜单
					//1.循环等级数组，给每个第一级找到第二级
					arr.forEach((item,i)=>{
						//2.将list整个循环，将每一条数据都给等级作比较
						this.list.forEach((val,k)=>{
							//判断父级的id === 数据的pid
							if(item.value === val.pid){
								//声明一个下一维度的数组
								if(!item.children)item.children = [];
								item.children.push({value:val.id,label:val.type});
							}
						})
						if(item.children){
							this.getMenu(1,item.children);
						}
					})
				}
			}
		},
		mounted() {
			this.Times(new Date());
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.bookedit{
		overflow: auto;
		background-color: white;
		width: 100%;
		height: 100%;
	}
	.bookedit div h3 {
		margin: 0;
		line-height: 50px;
	}
	.bookedit div p input{
		width: 200px;
	}
	.bookedit div p select{
		height: 25px;
		width: 200px;
	}
	article .bookimg img{
		width: 100%;
		height: 100%;
		margin-right: 25px;
	}
	article{
		width: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	.bookimg {
		margin-right: 25px;
		border: 1px solid #737A7F;
		width: 60px;
		height: 60px;
		float: left;
	}
	:deep(.el-input__inner){
		height: 30px;
		padding: 0;
	}
</style>
